// 头部导航公用
<template>
  <div class="container">
    <!-- 标题栏 -->
    <div class="header">
      <div class="tab-info">
        <span class="icon" :class="headerIcon ? headerIcon : '' ">
          <i class="el-icon-menu"></i>
        </span>
        <span class="info">{{headerText}}</span>
      </div>
    </div>

    <!-- 内容部分 -->
    <slot></slot>

    <div class="footer">商城 © v1.0.1</div>
  </div>
</template>

<script>
export default {
  name: "",
  props: ["headerIcon", "headerText"],
  data() {
    return {};
  },
  mounted() {
    this.getData();
  },
  methods: {
    //获取数据
    getData() {},

    //提交
    handleSubmit() {},
  },
};
</script>

<style lang="scss" scoped>
// @import '~styles/mixins.scss';
// @import '~styles/variables.scss';

//容器
.container {
  background-color: #f1f1f6;
  height: 100%;
  width: 100%;
  overflow-y: auto;
  padding-top: 10px;
  padding-bottom: 50px;
  box-sizing: border-box;
}

.content {
  overflow-y: auto;
  min-width: 1000px;
}

//隐藏滚动条
.container::-webkit-scrollbar {
  width: 0 !important;
}

//头部
.header {
  height: 46px;
  border-bottom: #ddd;
  color: #101010;
  font-size: 14px;
  line-height: 16px;
}

//隐藏滚动条
.content::-webkit-scrollbar {
  width: 0 !important;
}

//中间容器
.content {
  position: relative;
  background-color: #fff;
  margin: 0 14px;
  height: 100%;

  //列表
  .list {
    margin: 0 20px;
    border-radius: 4px;
    // border: 1px solid #efefef;
    // border-bottom: 0px solid #ddd;
  }

  //分页
  .paging {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px 0;
    background-color: #fff;
    // border: 1px solid #efefef;
    margin: 10px 20px;

    .confirm-btn {
      .btn {
        height: 32px;
        line-height: 32px;
        padding: 0 15px;
        margin-left: 10px;
      }
    }
  }
}

// //调整表格高度
// .tableBox {
//   th {
//     padding: 0 !important;
//     height: 30px;
//     line-height: 30px;
//   }

//   td {
//     padding: 0 !important;
//     height: 30px;
//     line-height: 30px;
//   }
// }

//尾部
.footer {
  position: fixed;
  bottom: 0;
  left: 230px;
  width: calc(100% - 288px);
  height: 46px;
  font-size: 14px;
  text-align: center;
  color: #101010;
  line-height: 46px;
  // background-color: #edf2f2;
  border-top: 1px solid #efefef;
  background-color: #fff;
  margin: 0 28px;
  margin-top: 10px;
  border-radius: 4px;
}

</style>